<template>
  <div>
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="channelId" label="渠道">
        <template slot-scope="{ row }">
          <span>{{ getChannelName(row.channelId) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="media" label="媒体" />
      <el-table-column prop="city" label="城市" />
      <el-table-column prop="dayCount" label="每天量级" />
      <el-table-column prop="weekCount" label="每周量级" />
      <el-table-column prop="monthCount" label="每月量级" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="createDate" label="创建日期" />
      <el-table-column prop="updateBy" label="修改人" />
      <el-table-column prop="updateDate" label="修改日期" />
      <el-table-column label="操作" width="200px" align="center">
        <template slot-scope="{ row }">
          <el-link type="primary" class="el_link" @click="edit(row)">编辑</el-link>
          <el-link type="primary" class="el_link" @click="handleInput(row)">录入成本</el-link>
          <el-link type="primary" class="el_link" @click="lookDetail(row)">查看成本</el-link>
          <!-- <el-button type="primary" plain size="mini" @click="edit(row)">编辑</el-button>
          <el-button type="info" plain size="mini" @click="handleInput(row)">录入成本</el-button>
          <el-button type="default" plain size="mini" @click="lookDetail(row)">查看成本</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看成本弹框 开始 -->
    <glsx-dialog :show="showDialog" title="查看成本" width="70%" @close="closeDialog()" :appendtobody="true">
      <div>
        <cost-detail :info="current"></cost-detail>
      </div>
    </glsx-dialog>
    <!-- 查看成本弹框 end -->

  </div>
</template>
<script>
import { pick } from "lodash";
import GlsxDialog from "@/components/Dialog";
import CostDetail from "../../cost.vue";
import EventBus from "@/utils/eventBus";
export default {
  name: "RationTable",
  components: { GlsxDialog, CostDetail },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    channelList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      showDialog: false,
      current: {},
    };
  },
  mounted() {
    EventBus.$on("add.cost.info", this.handleInput);
  },
  methods: {
    handleInput(row) {
      const { content } = this.$parent.inputDialog;
      const pickArr = ["orgId", "channelId", "media", "city"];
      const obj = {
        ...pick(row, pickArr),
        rationId: row.id,
      };
      this.$parent.inputDialog = {
        visible: true,
        content: {
          ...content,
          ...obj,
          channelName: this.getChannelName(row.channelId),
        },
      };
    },
    edit(row) {
      const { id, channelId, media, city, dayCount, weekCount, monthCount } =
        row;
      this.$router.push({
        name: "rationCreate",
        params: {
          id,
          channelId,
          media,
          city,
          dayCount,
          weekCount,
          monthCount,
          type: "edit",
        },
      });
      console.log("操作");
    },
    getChannelName(channelId) {
      return this.channelList.find(({ value }) => value === channelId)?.label;
    },

    // 查看详情
    lookDetail(row) {
      this.showDialog = true;
      this.current = row;
    },

    // 关闭弹框
    closeDialog() {
      this.showDialog = false;
      this.current = {};
    },
  },
};
</script>
<style lang="scss" scoped>
.el_link {
  margin: 0 4px;
}
</style>
